<script setup>
import { onMounted, ref } from "vue";
import MusicItem from './MusicItem.vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { getRemSong } from '../../../api/song'
import { splitArr } from '../../../common/index'

const songs = ref([])
// 获取新歌列表
const getNewSongList = () => {
  getRemSong(30).then(res => {
    songs.value = splitArr(res.result , 3)
    console.log(songs.value);
  })
}

onMounted(() => {
  getNewSongList()
})
</script>

<template>
  <swiper :slides-per-view="3" :space-between="24">
    <swiper-slide v-for="(item,index) in songs" :key="index">
      <div v-for="song in item" :key="song.id">
        <music-item :item="song"/>
      </div>
    </swiper-slide>
  </swiper>
</template>

<style scoped lang="scss">

</style>
